<template>
  <div>
    <div class="searchBox">
      <form-box :fields="searchField" :is-filter="true" :submit-handle="searchHandle" />
      <div class="table-operator">
        <el-button type="primary" size="large" round style="height:39px" @click="exportFun">导出</el-button>
      </div>
    </div>

    <el-table v-if="channel === 'nicemama'" v-loading="loading" :data="list" border style="width: 100%" :cell-style="finalCellStyle">
      <template v-for="item in items">
        <el-table-column :key="item.prop" :prop="item.prop" align="center" :width="item.prop === 'name' || item.prop === 'practicalAmount' || item.prop === 'totalAmount' ? 80:35">
          <template slot="header">
            <div v-if="item.type === 'check'">
              <div>
                {{ item.label }}
              </div>
              <div>
                {{ item.day | dayFilter }}
              </div>
            </div>
            <div v-else>
              {{ item.label }}
            </div>
          </template>
          <template slot-scope="scope">
            <div v-if="item.prop === 'name' || item.prop === 'attendanceCount' || item.prop === 'leaveCount' || item.prop === 'sickCount' || item.prop === 'practicalAmount' || item.prop === 'totalAmount'">
              {{ scope.row[item.prop] }}
            </div>
            <div v-else-if="scope.row[item.prop].status === 4 && scope.row[item.prop].healthyStatus === 1">
              病假
            </div>
            <div v-else-if="scope.row[item.prop].status === 4 && scope.row[item.prop].healthyStatus === 0">
              请假
            </div>
            <div v-else>
              {{ scope.row[item.prop].effectDay }}
            </div>
          </template>
        </el-table-column>
      </template>
    </el-table>

    <el-table v-else v-loading="loading" :data="list" border style="width: 100%" :cell-style="finalCellStyle">
      <template v-for="item in items">
        <el-table-column :key="item.prop" :prop="item.prop" align="center" :width="item.prop === 'name' || item.prop === 'practicalAmount' || item.prop === 'totalAmount' ? 80:35">
          <template slot="header">
            <div v-if="item.type === 'check'">
              <div>
                {{ item.label }}
              </div>
              <div>
                {{ item.day | dayFilter }}
              </div>
            </div>
            <div v-else>
              {{ item.label }}
            </div>
          </template>
          <template slot-scope="scope">
            <div v-if="scope.row[item.prop] === ''">
              <img src="@/assets/wdk.png" alt="">
            </div>
            <div v-else-if="scope.row[item.prop] === '出勤'">
              <img src="@/assets/gou.png" alt="">
            </div>
            <div v-else-if="scope.row[item.prop] === '请假'">
              <img src="@/assets/qsj.png" alt="">
            </div>
            <div v-else-if="scope.row[item.prop] === '病假'">
              <img src="@/assets/qbj.png" alt="">
            </div>
            <div v-else>
              {{ scope.row[item.prop] }}
            </div>
          </template>
        </el-table-column>
      </template>
    </el-table>

    <div v-if="channel !== 'nicemama'" class="hint">
      <div>
        <img src="@/assets/gou.png">
        <span>出勤</span>
      </div>
      <div>
        <img src="@/assets/wdk.png">
        <span>未打卡（未点名）</span>
      </div>
      <div>
        <img src="@/assets/qbj.png">
        <span>请病假</span>
      </div>
      <div>
        <img src="@/assets/qsj.png">
        <span>请事假</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getClassesByArea } from '@/api/common'
import { getClassChildrenCheckList, exportClassChildrenCheckList, getMonthClassCheck, exportClassChildrenCheckList2 } from '../../api'
import dayjs from 'dayjs'
import { getMonthFirst, getMonthLast } from '../../../../../utils/date'
export default {
  name: 'Attendance',
  filters: {
    dayFilter (val) {
      if (val === 0) {
        return '日'
      } else if (val === 1) {
        return '一'
      } else if (val === 2) {
        return '二'
      } else if (val === 3) {
        return '三'
      } else if (val === 4) {
        return '四'
      } else if (val === 5) {
        return '五'
      } else if (val === 6) {
        return '六'
      }
    }
  },
  data () {
    return {
      loading: false,
      list: [],
      items: [],

      classId: '',
      classes: [],
      date: new Date(),
      channel: process.env.VUE_APP_CHANNEL
    }
  },
  computed: {
    ...mapGetters(['curArea']),
    searchField () {
      const { classId } = this
      return [
        {
          key: 'classId',
          label: '班级名称',
          type: 'select',
          initialValue: classId,
          fieldProps: {
            options: this.classes,
            props: { value: 'id', label: 'name' }
          },
          events: {
            change: val => this.classChange(val)
          }
        },
        {
          key: 'name',
          label: '宝宝姓名'
        },
        {
          key: 'date',
          label: '月份',
          type: 'month',
          initialValue: dayjs(this.date).format('YYYY-MM'),
          events: {
            change: val => this.dateChange(val)
          }
        }
      ]
    }
  },
  created () {
    this.getClassList()
    console.log(process.env.VUE_APP_CHANNEL)
  },
  methods: {
    searchHandle (res) {
      console.log(res)
      this.getData(res)
    },

    // 获取班级列表
    getClassList () {
      const { curArea } = this
      console.log(curArea)
      getClassesByArea({ areaId: curArea.areaId, category: 1 }).then(res => {
        this.classes = res || []
        console.log(this.classes)
        this.classChange(this.classes[0] ? this.classes[0].id : '')
      })
    },
    // 选择班级
    classChange (val) {
      this.classId = val
    },
    dateChange (val) {
      console.log(val)
      this.date = val
    },

    getData (res) {
      const beginDate = getMonthFirst(this.date)
      const endDate = getMonthLast(this.date)
      const { classId } = this
      const { name } = res
      this.loading = true
      if (this.channel === 'nicemama') {
        getMonthClassCheck({ beginDate, endDate, classId, name }).then(res => {
          this.handleData(res, beginDate, endDate)
        }).finally(() => {
          this.loading = false
        })
      } else {
        getClassChildrenCheckList({ beginAt: beginDate, endAt: endDate, classId, name }).then(res => {
          this.handleData(res, beginDate, endDate)
        }).finally(() => {
          this.loading = false
        })
      }
    },

    handleData (res, beginAt, endAt) {
      const beginIndex = dayjs(beginAt).date()
      const endIndex = dayjs(endAt).date()
      const colume = []
      colume.push(
        {
          label: '姓名',
          prop: 'name'
        }
      )
      for (let index = beginIndex; index <= endIndex; index++) {
        const date = dayjs(beginAt).add(index - 1, 'day')
        const item = {
          label: index.toString(),
          prop: dayjs(date).format('YYYY-MM-DD'),
          day: dayjs(date).day(),
          type: 'check'
        }
        colume.push(item)
      }
      colume.push(
        {
          label: '出勤',
          prop: 'attendanceCount'
        }
      )
      colume.push(
        {
          label: '事假',
          prop: 'leaveCount'
        }
      )
      colume.push(
        {
          label: '病假',
          prop: 'sickCount'
        }
      )
      colume.push(
        {
          label: '消课总额',
          prop: 'practicalAmount'
        }
      )
      colume.push(
        {
          label: '月合同总额',
          prop: 'totalAmount'
        }
      )
      this.items = colume
      this.list = res
      console.log(this.list)
      console.log(this.items)
    },

    exportFun () {
      const beginAt = getMonthFirst(this.date)
      const endAt = getMonthLast(this.date)
      const { classId } = this
      if (this.channel === 'nicemama') {
        exportClassChildrenCheckList2({ beginDate: beginAt, endDate: endAt, classId }).then(res => {
          window.location.href = res
        })
      } else {
        exportClassChildrenCheckList({ beginAt, endAt, classId }).then(res => {
          window.location.href = res
        })
      }
    },

    finalCellStyle ({ row, column, rowIndex, columnIndex }) {
      const columeItem = this.items[columnIndex]
      // console.log(columeItem)
      if (this.channel === 'nicemama') {
        const row = this.list[rowIndex]
        // console.log(columeItem.prop)
        if (columeItem.prop !== 'name' && columeItem.prop !== 'attendanceCount' && columeItem.prop !== 'leaveCount' && columeItem.prop !== 'sickCount') {
          const item = row[columeItem.prop]
          // console.log(item)
          if (!item.isWork) {
            return {
              background: '#FEFBEE'
            }
          }
        }
      } else {
        if (columeItem.day === 0 || columeItem.day === 6) {
          return {
            background: '#FEFBEE'
          }
        }
      }

      return {

      }
    }
  }
}
</script>

<style lang="scss">
.searchBox{
  display: flex;
  flex-direction: row;
  position: relative;
  padding-bottom: 0;
  place-content: flex-end;
  justify-content: space-between;
  margin-bottom: 20px;
}

.hint{
  margin-top: 10px;
}
  .weekend-bg{
    background: #7d7d7f;
    width: 100%;
    height: 100%;
  }
.el-table{
  .cell{
    padding: 0;
  }
}
.el-table{
  th {
    .cell{
      padding: 0;
    }
  }

}
.hint{
  display: flex;
  align-items: center;
  div{
    display: flex;
    align-items: center;
    img{
      margin-right: 16px;
    }
    span{
      margin-right: 48px;
    }
  }
}
</style>
